<template>
  <page-wrap
    :show-top="true"
    :customWrapStyle="customWrapStyle"
    :title="name"
    back
    hideTab
    :hideSafeArea="true"
    txtColor="#222"
    bgColor="transparent"
    class="pageWrap"
  >
    <!--  职业顾问管理页面      -->
    <view
      class="article"
      :style="'padding-top:' + navHeight + 'px;'"
      type="line"
    >
      <view class="search">
        <!-- :search-icon="searchIcon" -->
        <u-search
          :placeholder="`搜索该职业${options.title}`"
          placeholder-color="#b2b2b2"
          class="library-u-search"
          v-model="keyword"
          height="80"
          bg-color="#ffffff"
          :search-icon="searchIcon"
          :show-action="showRightSearchText"
          @search="handleSearch"
          @custom="handleSearch"
          @blur="closeSearchText"
          @focus="showSearchText"
          maxlength="20"
        ></u-search>
      </view>
      <scroll-view
        class="article-list"
        :scroll-top="scrollTop"
        scroll-y
        :scroll-anchoring="false"
        refresher-enabled
        :refresher-triggered="triggered"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        @scrolltolower="loadMore"
        lower-threshold="100"
      >
        <template v-for="(item, index) in dataList">
          <ArticleItem
            class="list-item"
            :key="index"
            :item="item"
            @update="handleUpdate($event, index)"
            @delete="handleDelete($event, index, 'article')"
            :isShowCollectIcon="false"
            :relatedType="relatedType"
            :layerId="moreLayerId"
            :positionId="positionId"
          ></ArticleItem>
        </template>
        <u-loadmore
          v-if="dataList.length || !loaded"
          class="list-more"
          :status="moreLoading"
          :load-text="loadText"
        />
        <Empty
          v-if="loaded && !dataList.length"
          :baseImg="emptyImg"
          :text="`暂无相关${options.title}`"
          textColor="#888"
          :fontWeight="400"
        />
      </scroll-view>
    </view>
  </page-wrap>
</template>

<script>
import ArticleItem from "@/components/ArticleItem";
import Empty from "@/components/Empty.vue";
import { getSearchJobInfo } from "@/api/modules/career";
import ShareMixin from "@/mixins/share";
import ReportShare from "@/mixins/reportShare";

export default {
  mixins: [ShareMixin,ReportShare],
  components: {
    Empty,
    ArticleItem,
  },
  data() {
    return {
      navHeight: 0,
      personId: uni.getStorageSync("person-id").slice(2) || "",
      searchIcon: this.$imgBaseSelf + "common/search_gray.png",
      scrollTop: 0,
      showRightSearchText: false,
      name: "",
      options: {},
      dataList: [],
      loaded: false,
      triggered: false,
      _triggered: false,
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      keyword: "",
      moreLoading: "loadmore",
      pageParams: {
        pageNo: 0,
        pageSize: 20,
        finished: false,
        loading: false,
      },
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      selectedItem: {},
      showDeleteModal: false,
      deleteData: "",
      deleteIndex: "",
      deleteType: "",
      isCareerIndex: true,
      moreLayerId: "",
      moreLayerType: "",
      relatedType: 2,
      positionId: "",
    };
  },

  created() {
    this.navHeight = getApp().globalData.navHeight;
  },
  onLoad(opt) {
    this.options = opt;
    this.name = this.options.name + "·" + this.options.title;
    uni.setNavigationBarTitle({
      title: "更多" + this.options.title,
    });
    this.shareTitle = this.name;
    this.moreLayerId = opt.moreLayerId;
    this.moreLayerType = opt.moreLayerType;
    this.positionId = this.options.positionId + "";
    this.shareQuery = `positionId=${this.options.positionId}&name=${this.options.name}&title=${this.options.title}&moreLayerId=${this.options.moreLayerId}&moreLayerType=${this.options.moreLayerType}`;
    this.sharePath = `/pagesSub/career/moreJobMessage/index?${this.shareQuery}`;
    this.shareContent.contentType = '31'
  },
  mounted() {
    this.getData();
  },
  methods: {
    // onShareTimeline() {
    //   return {
    //     title: this.shareTitle, // 标题
    //     path: "/pagesSub/career/moreJobMessage/index", // 分享路径
    //     query: `positionId=${this.options.positionId}&name=${this.options.name}&title=${this.options.title}&moreLayerId=${this.options.moreLayerId}&moreLayerType=${this.options.moreLayerType}`,
    //   };
    // },
    showSearchText() {
      this.showRightSearchText = true;
    },
    closeSearchText() {
      this.showRightSearchText = false;
    },
    getData(isMore) {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        keyword: this.keyword,
        personId: this.personId || 1,
        layerId: this.moreLayerId,
        layerType: this.moreLayerType,
        positionId: this.options.positionId,
      };
      this.moreLoading = "loading";
      console.log("xxxxxxxxxxxxx------->", params);
      getSearchJobInfo(params)
        .then((res) => {
          console.log("getSearchJobInfo------->", res);
          this.pageParams.loading = false;
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res && res.code == 200) {
            if (isMore) {
              this.dataList.push(...res.data);
            } else {
              this.dataList = res.data;
            }
            if (this.pageParams.pageNo >= res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
            this.pageParams.pageNo++;
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
              duration: 2000
            });
          }
        })
        .finally(() => {
          this.triggered = false;
          this._triggered = false;
        });
    },
    handleSearch() {
      this.onRefresh();
    },
    loadMore() {
      this.getData(true);
    },
    onRestore() {
      this.triggered = false;
      this._triggered = false;
    },
    onRefresh() {
      if (this.scrollTop == 0) {
        this.scrollTop = 0.1;
      } else {
        this.scrollTop = 0;
      }
      console.log("xxxxxx 刷新了 ！！！！！xxxxxxx------->");
      if (this._triggered) return;
      this._triggered = true;

      if (!this.triggered) {
        this.triggered = true;
      }
      this.loaded = false;
      this.moreLoading = "loadmore";
      this.pageParams.pageNo = 0;
      this.getData();
    },

    handleUpdate(data, index) {
      console.log("------操作行为-----", data, index);
      if (data.operateType == "favorite") {
        this.dataList[index].isFavorite = data.type == "add" ? "1" : "0";
      } else if (data.operateType == "praise") {
        this.dataList[index].isPraise = data.type == "add" ? "1" : "0";
        this.dataList[index].likeCnt =
          data.type == "add"
            ? this.dataList[index].likeCnt + 1
            : this.dataList[index].likeCnt - 1;
      }
    },
    handleDelete(data, index, type) {
      this.deleteType = type;
      this.deleteIndex = index;
      this.deleteData = data;
      this.$emit("delete", {
        item: data.item,
        index,
        detail: data.detail,
        type,
      });
    },
    updateLink(linkType, moduleId) {
      console.log("删除数据后---------->", this.dataList, linkType, moduleId);
      if (this.deleteType == "video") {
        this.dataList[this.deleteIndex].splice(this.deleteData.index, 1);
      } else if (this.deleteType == "article") {
        this.dataList.splice(this.deleteIndex, 1);
      } else if (this.deleteType == "specialIssue") {
        this.dataList.splice(this.deleteIndex, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.article {
  background-image: url($img-base + "career/jobList_bg.png");
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  .search {
    display: flex;
    padding: 12rpx 32rpx 32rpx 32rpx;
    border-radius: 18px;
    ::v-deep.u-content {
      padding: 0 20rpx 0rpx 32rpx;
    }
    ::v-deep.u-close-wrap {
      transform: scale(1.5);
    }

    ::v-deep.u-icon__img {
      width: 80rpx;
      height: 80rpx;
    }

    .library-u-search {
      flex: 1;
      width: 686rpx;
      height: 72rpx;
    }
  }

  &-list {
    width: 94%;
    height: calc(100vh - 180px);
    background-color: #fff;
    margin: auto;
    border-radius: 8px;
    box-sizing: border-box;
    flex-grow: 1;
  }
}
</style>
